MSG

# 前端练习题

# 1. 前端之博客页面(HTML、CSS)

MkzoQJ.png

# HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!-- 描述网页，与之对应的属性值为content
    <meta name="keywords" content="">
    <meta name="description" content=""> -->
    <link rel="stylesheet" href="blog.css">
    <title>文章分享</title>
</head>
<body>

<div>
    <div class="left">
        <div class="left_head">
            <img class="left_head_img" src="head.jpg" alt="">
        </div>
        <div class="left_name">MSG</div>
        <div class="left_introduce">There Is Only One Line Difference Between Genius And Madman.</div>
        <div class="left_lint">
            <ul>
                <li><a href="">关于我</a></li>
                <li><a href="">微博</a></li>
                <li><a href="">公众号</a></li>
            </ul>
        </div>
        <div class="left_tag">
            <ul>
                <li><a href=""># Java</a></li>
                <li><a href=""># Python</a></li>
                <li><a href=""># GO</a></li>
            </ul>
        </div>
    </div>

    <div class="right">
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
        <div class="right_whole">
            <div class="right_head">理想跟现实<span>2019-11-02</span></div>
            <div class="rigth_middle">理想与现实是悲伤的，它们中间布满了残酷和打击，现实和理想是励志的，这个过程中充满了努力与坚持</div>
            <div class="right_tail">
                <span><a href="">#技术杂谈</a></span>
                <span><a href="">#心绪整理</a></span>
            </div>
        </div>
    </div>
</div>
</body>
</html>

# CSS代码


body,a,ul {
    margin: 0;
    text-decoration: none;
    list-style-type: none;
    padding: 0;
}


.left {
    width: 22%;
    height: 100%;
    background-color: #4d4d4d;
    float: left;
    position: fixed;
}

.left_head {
    width: 125px;
    height: 125px;
    border: 2px solid white;
    margin: 36px auto;
    overflow: hidden;
    border-radius: 50%;
}

.left_head_img {
    width: 100%;
    height: 100%;
}

.left_name {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: rgb(238,238,2338);
}

.left_introduce {
    text-align: center;
    font-size: 16px;
    color: rgb(238,238,2338);
    margin: 36px auto;
}

.left_lint {
    margin-top: 60%;
    margin-bottom: 24px;
}

.left_tag li,
.left_lint li {
    text-align: center;
    padding: 2px;
}

.left_tag li a,
.left_lint li a {
    color: rgb(136,136,136);
}

.left_tag li a:hover,
.left_lint li a:hover {
    color: white;
}



.right {
    width: 78%;
    height: 100%;
    float: right;
    background-color: rgb(238,238,238);
}

/*实现移直文章会进行动态效果*/
.right_whole:hover {
    box-shadow: 0 5px 10px rgba(0,0,0, 0.2);
    transform: translate3d(0, -3px, 0);
    transition: all 300ms linear;
}

.right_whole {
    margin: 20px 160px 20px 20px;
    background-color: white;
}

.right_head {
    border-left: 4px solid coral;
    padding: 15px 20px;
    font-weight: bold;
    font-size: 24px;
}

.right_head span {
    font-weight: normal;
    float: right;
    font-size: 16px;
}

.rigth_middle{
    margin: 30px 24px;
    padding-bottom: 25px;
    border-bottom: 1px solid silver;
}


.right_tail {
    margin: 25px 20px;
    padding-bottom: 25px;
    font-size: 14px;
}

.right_tail span a{
    padding: 0 5px;
    color: rgb(136,136,136);
}

.right_tail span a:hover {
    color: black;
}

# 自定义模态框实验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!-- 描述网页，与之对应的属性值为content
    <meta name="keywords" content="">
    <meta name="description" content=""> -->
    <title>Title</title>
 <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

# 返回顶部

重点代码

<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>

全部代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>

# 菜单框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!-- 描述网页，与之对应的属性值为content
    <meta name="keywords" content="">
    <meta name="description" content=""> -->
    <title>Title</title>
    <style>
        .outer {
            margin: 0;
            width: 100px;
            height: 200px;
        }
        .list {
            border: 1px dashed seagreen;
        }
        .list_head {
            border: 2px solid seagreen;
            padding: 5px 10px;
            text-align: center;
            background-color: seagreen;
            color: #c4e3f3;
        }

        .hae {
            display: none;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="list">
        <div class="list_head">菜单1</div>
        <div class="list_subject hae">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="list">
        <div class="list_head">菜单2</div>
        <div class="list_subject hae">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="list">
        <div class="list_head">菜单3</div>
        <div class="list_subject hae">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
</div>


<script src="jquery-3.3.1.min.js"></script>
<script>
    $(".list_head").click(function () {
        console.log(111);
        $(this).next().toggleClass("hae").parent().siblings().find(".list_subject").addClass("hae");
    })

</script>
</body>
</html>

# 登录校验 - 判断用户有输入用户名或密码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!-- 描述网页，与之对应的属性值为content
    <meta name="keywords" content="">
    <meta name="description" content=""> -->
    <title>Title</title>
</head>
<body>

<div>
    <label for="username">用户名</label>
    <input type="text" id="username" name="user">
    <span></span>
</div>
<div>
    <label for="password">密码</label>
    <input type="passwordname" id="password" name="pawd">
    <span></span>
</div>
<div>
    <input type="submit" id="submit">
</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    function f(a) {
        setTimeout(function () {
           $("#" + a).next().text("")
        },3000)
    }
    $("#submit").click(function () {
        if (!$("#username").val()) {
            $("#username + span").text("请输入用户名").css("color","red");
            f("username")
        }
        if (!$("#password").val()) {
            $("#password + span").text("请输入密码").css("color","red");
            f("password")
        }
    })

</script>

</body>
</html>

# 实例 - 复制按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

# 登录页面校验

MyGh4I.png

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 描述网页，与之对应的属性值为content
    <meta name="keywords" content="">
    <meta name="description" content=""> -->
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">
    <style>
        body {
            background-color: #eeeeee;
        }
        .info_so {
            margin-top: 200px;
        }

    </style>
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-3 info_so">
            <h2 class="text-center">请先登录</h2>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
                    <div class="col-sm-9">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
                        <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="密码">
                        <span class="help-block"></span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 记住我？
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="button" class="btn btn-block btn-primary">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script src="jQuery作业/jquery-3.3.1.js"></script>
<script>
    $("[type='button']").click(function () {
        // 点击登录按键进行校验
        $(".control-label").parent().each(function () {
            if ($(this).find("input").val().length === 0 )  {
                var name = $(this).find("label").text();
                $(this).find("span").text(name + "不能为空");
                $(this).addClass("has-error");
            }
        })
    });

    $("[class='form-control']").focus(function () {
        $(this).next().text("");
        $(this).parent().parent().removeClass("has-error");
    });

    $("[class='form-control']").focusout(function () {
        if ($(this).val().length === 0 ) {
            console.log(2222)
            var name = $(this).parent().parent().find("label").text();
            $(this).next().text(name + "不能为空");
            $(this).parent().parent().addClass("has-error");
        }
    });
</script>

</body>
</html>

← 前端网址记录 →